<!--  -->
<template>
    <div class="item">
        <img :src="detail.productImg" alt="">
        <div class="product">
            商品名称：<span>{{ detail.productName }}</span>
        </div>
        <div class="price">单价：<span>￥{{ detail.productPrice }}</span></div>
        <div class="acount">数量：<span>{{ detail.productQty }}</span></div>
        <div class="total">小计：<span>￥{{ total }}</span></div>

    </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
let props = defineProps(['detail'])

const total = computed(() => (props.detail.productPrice * props.detail.productQty).toFixed(2))

</script>

<style lang="scss" scoped>
.item {
    height: 150px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgb(248, 226, 226);
    font-size: 12px;
    color: #7f7f7f;

    div {
        padding-left: 10px;
        flex: 1;

    }

    img {
        width: 130px;
        height: 130px;
    }
}
</style>